<template>
	<view class="main-page">
		<view class="header-box">
			<view class="title-box">
				<image class="back-ic" src="../../static/common/ic_back_white.png" @click="goBack"></image>
				<text class="font-fff-36 font-weight-600">本次预约管理客户</text>
			</view>
		</view>
		<view class="content-box">
			<view class="content-bg"></view>
			<view class="row-container-row-between width-100p" style="z-index: 50;">
				<text class="font-fff-36 font-weight-600 ml-30">所有客户</text>
				<text class="font-fff-28 mr-30">已到店客户：{{appointInfoData.joinedCount}}/{{clientList.length}}</text>
			</view>
			<view class="user-item" v-for="(item , index) in clientList" :key="index">
				<view class="row-container">
					<image class="wh-80 mr-24" v-if="item.sex == 0" src="../../static/common/ic_avatar_female.png"></image>
					<image class="wh-80 mr-24" v-if="item.sex == 1" src="../../static/common/ic_avatar_male.png"></image>
					<view class="column-container">
						<text class="font-333-32 font-weight-600">{{item.realName}}</text>
						<view class="row-container">
							<text class="font-666-26">编号：{{item.id}}</text>
							<view class="line"></view>
							<text class="font-666-26" v-if="item.sex == 0">女</text>
							<text class="font-666-26" v-if="item.sex == 1">男</text>
							<view class="line"></view>
							<text class="font-666-26">电话：{{item.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="source-box" v-if="item.brithdayTime || item.channelMsg ">
					<text class="font-999-22" v-if="item.channelMsg">来源：{{item.channelMsg}}</text>
					<view class="line" v-if="item.channelMsg"></view>
					<text class="font-999-22" v-if="item.brithdayTime">生日：{{item.brithdayTime}}</text>
					<view class="line" v-if="item.lastShopTime"></view>
					<text class="font-999-22" v-if="item.lastShopTime">
						上次到店时间：{{item.lastShopTime}}</text>
					<text class="font-999-22" v-else>暂无到店记录</text>
				</view>
				<view class="row-container-row-between width-100p mt-20">
					<text class="grey-btn" @click="handleClickCancel(item)">取消预约</text>
					<text class="grey-btn" @click="handleCallNumber(item.mobile)">电话联系</text>
					<text class="green-btn" v-if="item.status == 1">已到店</text>
					<text class="red-btn" v-else @click="handleClickConfirm(item)">确认到店</text>
				</view>
				
			</view>
			
		</view>
		
		
		<view class="bottom-box" @click="gotoChangeAppoint" v-if="appointStatus != 1">
			<text class="red-btn mt-16">改约</text>
		</view>
		
		<!-- 取消弹窗 -->
		<view class="window-main" v-if="showCancelAppointWindow">
			<view class="cancel-window">
				<text class="font-333-36 font-weight-600 ml-10">确认取消用户预约吗？</text>
				<text class="font-666-32 mt-10 ml-10">请与用户沟通后再取消预约，谨慎操作！</text>
				<view class="row-container width-100p mt-40 ml-10">
					<text class="font-f23-28 font-weight-600">*</text>
					<text class="font-333-28 font-weight-600">请选择取消预约原因</text>
				</view>
				<view class="row-container width-100p mt-20" style="flex-wrap: wrap;">
					<text v-for="(reasonItem , reasonIndex) in cancelReasonList" :key="reasonIndex"
					:class="{'chosen-reason-item' : chosenCancelReason == reasonItem , 
					'reason-item' : chosenCancelReason != reasonItem}" @click="changeCancelReason(reasonItem)">
						{{reasonItem}}
					</text>
				</view>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="cancel-cancel" @click="showCancelAppointWindow = false">取消</text>
					<text :class="{'cancel-confirm-negative' : !chosenCancelReason , 
					'cancel-confirm' : chosenCancelReason}" @click="handleCancelAppoint">确定</text>
				</view>
				
			</view>
		</view>
		
		<!-- 确认到店弹窗 -->
		<view class="window-main" v-show="showConfirmWindow">
			<view class="cancel-window">
				<text class="font-333-36 font-weight-600">是否确认到店？</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-cancel" @click="showConfirmWindow = false">取消</text>
					<text class="cancel-confirm" @click="handleConfirmComplete">确定</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import constant from '../../utils/constant.js'
	
	export default {
		data() {
			return {
				clientList:[],
				appointId:'',
				appointInfoData:{},
				
				showCancelAppointWindow:false,
				cancelReasonList:[],
				chosenCancelReason:'',
				
				rcId:'' , // 
				showConfirmWindow:false,
				
				appointStatus:0 , // 预约的状态  1为已完成  不可编辑 
				
			}
		},
		
		onLoad(options) {
			this.appointId = options.appointId
			this.appointStatus = options.appointStatus
			this.loadCancelReasonList()
			this.loadAppointInfo()
			
			let that = this
			uni.$on('refreshAppointInfo' , ()=>{
				that.loadAppointInfo()
			})
		},
		
		methods: {
			goBack(){
				uni.navigateBack()
			},
			
			loadCancelReasonList(){
				let that = this
				this.http({
					url:"/common/cancelList",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.cancelReasonList = data.data
						}
					},
					failed(e){
						
					}
				})
			},
			
			loadAppointInfo(){
				if (!this.appointId) return
				let that = this
				this.http({
					url:"/yy/custom/detail",
					method:"POST",
					data:{
						id:this.appointId
					},
					success(data){
						if (data.code == 200){
							that.appointInfoData = data.data
							that.clientList = data.data.customList
						}
						
					},
					failed(e){
						
					}
				})
			},
			
			//选择取消预约的原因
			changeCancelReason(item){
				this.chosenCancelReason = item
			},
			
			//点击取消  弹窗
			handleClickCancel(item){
				if (!this.utils.checkAuthority(constant.auth_cancel_appoint)){
					return
				}
				
				this.showCancelAppointWindow = true
				this.rcId = item.id
			},
			
			//点击到店  弹窗
			handleClickConfirm(item){
				if (!this.utils.checkAuthority(constant.auth_check_appoint)){
					return
				}
				
				this.rcId = item.id
				this.showConfirmWindow = true
			},
			
			//确认取消
			handleCancelAppoint(){
				if (!this.appointInfoData.id || !this.chosenCancelReason || !this.rcId) return
				
				let that = this
				this.http({
					url:"/yy/custom/cancelOne",
					method:"POST",
					data:{
						id:this.appointInfoData.id,
						rcId:this.rcId,
						msg:this.chosenCancelReason
					},
					success(data){
						if (data.code == 200){
							that.showCancelAppointWindow = false
							that.chosenCancelReason = ""
							that.rcId = ""
							that.loadAppointInfo()
							uni.$emit('refreshIndexData')
						}
						setTimeout(()=>{
							uni.showToast({
								title:data.msg,
								icon:'none'
							})
						} , 500)
					},
					failed(e){
						
					}
				})
				
			},
			
			//确认到店
			handleConfirmComplete(){
				if (!this.appointInfoData.id) return
				
				let that = this
				this.http({
					url:"/yy/custom/submitYy",
					method:"POST",
					data:{
						id:this.appointInfoData.id,
						rcId:this.rcId
					},
					success(data){
						if (data.code == 200){
							that.showConfirmWindow = false
							that.loadAppointInfo()
							that.rcId = ""
							uni.$emit("refreshIndexData")
						}
						uni.showToast({
							title:data.msg,
							icon:'none'
						})
					},
					failed(e){
						
					}
				})
			},
			
			//改约
			gotoChangeAppoint(){
				if (!this.utils.checkAuthority(constant.auth_change_appoint)){
					return
				}
				
				if (!this.appointInfoData) return
				
				uni.navigateTo({
					url:'/pages/appointment/modifyAppoint?appointId=' + this.appointInfoData.id
					+ "&customId=" + this.appointInfoData.customId
				})
			},
			
			handleCallNumber(val){
				if (!val) return
				uni.makePhoneCall({
					phoneNumber:val
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 176rpx;
		background: #F94C4B;
		position: fixed;
		top: 0;
		z-index: 50;
		
		.title-box{
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 88rpx;
			margin-top: 88rpx;
			
			.back-ic{
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				left: 22rpx;
			}
		}
	}
	
	.content-box{
		display: flex;
		flex-direction: column;
		margin-top: 176rpx;
		width: 100%;
		margin-bottom: 180rpx;
		padding: 20rpx 0rpx;
		position: relative;
		
		.content-bg{
			background: linear-gradient(180deg, #F94C4B 67%, rgba(249, 76, 75, 0) 100%);
			width: 100%;
			height: 226rpx;
			position: absolute;
			top: 0;
		}
		
		.user-item{
			display: flex;
			flex-direction: column;
			width: calc(100% - 108rpx);
			padding: 24rpx;
			margin: 20rpx 30rpx 0rpx 30rpx;
			background: white;
			margin-top: 20rpx;
			border-radius: 16rpx;
			z-index: 50;
			
			.line{
				width: 1rpx;
				height: 16rpx;
				background: #999999;
				margin: 0rpx 16rpx;
			}
			
			.source-box{
				background: #F7F7F7;
				border-radius: 4rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				width: calc(100% - 28rpx);
				padding: 6rpx 14rpx;
				margin-top: 12rpx;
			}
			
			.grey-btn{
				width: 200rpx;
				height: 68rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				text-align: center;
				line-height: 68rpx;
				color: #333333;
				font-size: 26rpx;
				font-weight: 600;
			}
			
			.green-btn{
				width: 200rpx;
				height: 68rpx;
				background: #47D2A0;
				border-radius: 10rpx;
				text-align: center;
				line-height: 68rpx;
				color: white;
				font-size: 26rpx;
				font-weight: 600;
			}
			
			.red-btn{
				width: 200rpx;
				height: 68rpx;
				background: #F94C4B;
				border-radius: 10rpx;
				text-align: center;
				line-height: 68rpx;
				color: white;
				font-size: 26rpx;
				font-weight: 600;
			}
			
		}
		
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 180rpx;
		background: white;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
	
	.cancel-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 198rpx);
		margin: 0rpx 69rpx;
		padding: 40rpx 30rpx;
		background: white;
		border-radius: 30rpx;
		
		.reason-item{
			border: #F94C4B solid 1rpx;
			padding: 18rpx 22rpx;
			font-size: 28rpx;
			color: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 10rpx 20rpx 10rpx;
			font-weight: 600;
		}
		
		.chosen-reason-item{
			padding: 18rpx 22rpx;
			font-size: 28rpx;
			color: white;
			background: #EC5150;
			border-radius: 10rpx;
			margin: 0rpx 10rpx 20rpx 10rpx;
			font-weight: 600;
		}
		
		.cancel-cancel{
			width: 200rpx;
			height: 85rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-right: 30rpx;
			text-align: center;
			line-height: 85rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.cancel-confirm{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.cancel-confirm-negative{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
			opacity: 0.5;
		}
	}
	
</style>
